import React, { useState, useEffect, useRef } from 'react';
import { Input, Button, ColorPicker } from 'antd';
import './Barrage.css';

interface BarrageProps {
  isPaused: boolean;
}

const Barrage: React.FC<BarrageProps> = ({ isPaused }) => {
  const [danmus, setDanmus] = useState<Array<{
    id: number;
    text: string;
    top: number;
    color: string;
    left: number;
  }>>([]);
  const [inputText, setInputText] = useState('');
  const [selectedColor, setSelectedColor] = useState('#FF0000');
  const containerRef = useRef<HTMLDivElement>(null);

  const colors = [
    '#FF0000', '#00FF00', '#0000FF', '#FFFF00', 
    '#FF00FF', '#00FFFF', '#FFA500', '#FF69B4'
  ];

  const generateRandomColor = () => {
    return colors[Math.floor(Math.random() * colors.length)];
  };

  const addDanmu = (text: string, color: string) => {
    const top = Math.floor(Math.random() * 80);
    setDanmus(prev => [...prev, {
      id: Date.now(),
      text,
      top,
      color,
      left: 100
    }]);
  };

  const handleSendDanmu = () => {
    if (inputText.trim()) {
      addDanmu(inputText, selectedColor);
      setInputText('');
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSendDanmu();
    }
  };

  useEffect(() => {
    if (!isPaused) {
      const interval = setInterval(() => {
        const texts = [
          '太棒了！', '666', '学到了', '真不错',
          '支持一下', '继续加油', '太精彩了', '赞'
        ];
        const text = texts[Math.floor(Math.random() * texts.length)];
        addDanmu(text, generateRandomColor());
      }, 2000);

      return () => clearInterval(interval);
    }
  }, [isPaused]);

  useEffect(() => {
    const moveDanmu = () => {
      if (!isPaused) {
        setDanmus(prev => 
          prev.map(danmu => ({
            ...danmu,
            left: danmu.left - 1
          })).filter(danmu => danmu.left > -20)
        );
      }
    };

    const animationFrame = requestAnimationFrame(moveDanmu);
    return () => cancelAnimationFrame(animationFrame);
  }, [isPaused, danmus]);

  return (
    <div className="barrage-wrapper">
      <div className="barrage-container" ref={containerRef}>
        {danmus.map(danmu => (
          <div
            key={danmu.id}
            className="danmu"
            style={{
              top: `${danmu.top}%`,
              left: `${danmu.left}%`,
              color: danmu.color
            }}
          >
            {danmu.text}
          </div>
        ))}
      </div>
      <div className="barrage-input">
        <Input
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="发送弹幕..."
          style={{ width: '200px', marginRight: '10px' }}
        />
        <ColorPicker
          value={selectedColor}
          onChange={(color) => setSelectedColor(color.toHexString())}
          style={{ marginRight: '10px' }}
        />
        <Button type="primary" onClick={handleSendDanmu}>
          发送
        </Button>
      </div>
    </div>
  );
};

export default Barrage; 